<script>
    // @ts-nocheck
    import { page } from '$app/stores';
    $: activeUrl = $page.url.pathname;


    const routers = [{
        label:'首页',
        value:'/'
    },{
        label:'枪械图鉴',
        value:'/weapons/1'
    }
    // ,{
    //     label:'一键配装',
    //     value:'/allocation'
    // },{
    //     label:'战绩查询',
    //     value:'/record'
    // }
    ]
</script>

<header>
    <div class="container">
        <div class="logo"><img src="/images/logo.png" /></div>
        <div class="box">
            <nav>
                {#each routers as item,index}
                <a href={item.value} class:on={item.value == activeUrl}>{item.label}</a>
                {/each}
                
            </nav>
        </div>
        
    </div>
</header>

<style lang="less" scoped>
    .action {
        display: none;
    }
    .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        
    }
    .icon {
        margin-right: 4px;
    }
    header {
        height: 60px;
        border-bottom: 1px solid #eee;
        display: flex;
        align-items: center;
    }
    nav {
        display: flex;
        align-items: center;
        padding: 0;
        margin: 0;
        a{
            padding: 0 20px;
            color: #333;
            &:hover, &.on{
                color: rgba(31, 100, 255,1);
            }
           
        }
    }
    .logo {
        margin-right: 25px;
        img{
            height: 32px;
        }
        
    }


    // @media (min-width: 768px) {
    //     .container {
    //     max-width: 720px;
    //     }
    // }



</style>
